<!-- 添加住户 -->
<template>
	<view class="no-warpper">
		<view class="nl-shadow-box u-skeleton">
			<view class="nl-flex-title">基本信息</view>
			<view class="nl-flex-list owner-photo">
				<text class="nl-margin-right">住户头像</text>
				<view class="right-grey" v-if="formData.ownerPhoto == ''" @click="chooseAvatar">请选择头像</view>

				<image @click="chooseAvatar" class="right u-avatar-demo" v-else :src="formData.ownerPhoto"
					mode="aspectFill"></image>

				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>
			<view class="nl-flex-list">
				<text class="nl-margin-right">所属房屋</text>
				<view :class="formData.roomId ? 'right':'right-grey'" @click="jumpRoom()">
					{{formData.roomId ? `${formData.floorNum} - ${formData.unitNum} - ${formData.roomNum}` : '请选择房屋'}}
				</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>
			<view class="nl-flex-list">
				<text class="nl-margin-right">姓名</text>
				<u-input class="input" v-model="formData.name" type="text" placeholder="请输入住户姓名" />
				<view class="take-idCard" @click="takeIdCardOpen()" v-if="formData.idCardType == 'PRC'">
					<image src="../../../static/icon/i-sbsfz.png" mode="aspectFill" />
				</view>
			</view>

			<view class="nl-flex-list">
				<text class="nl-margin-right">性别</text>
				<u-radio-group @change="radioGender">
					<u-radio name="0" v-model="formData.sex">
						男
					</u-radio>
					<u-radio name="1">
						女
					</u-radio>
				</u-radio-group>
			</view>

			<view class="nl-flex-list">
				<text class="nl-margin-right">年龄</text>
				<u-input class="input" v-model="formData.age" type="text" placeholder="请输入住户年龄" />
			</view>

			<view class="nl-flex-list">
				<text class="nl-margin-right">手机</text>
				<u-input class="input" v-model="formData.link" type="text" placeholder="请输入手机号码" />
			</view>

			<view class="nl-flex-list">
				<text class="nl-margin-right">身份证类型</text>
				<view class="right" @click="typeShow = true">{{idCardTypeName}}</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>

			<view class="nl-flex-list">
				<text class="nl-margin-right">身份证号</text>
				<u-input class="input" v-model="formData.idCard" type="idcard" placeholder="请输入身份证号" />
			</view>

			<view class="nl-flex-list">
				<text class="nl-margin-right">住户身份</text>
				<u-radio-group v-model="formData.ownerTypeCd" @change="radioIdentity">
					<u-radio name="1001">
						业主
					</u-radio>
					<!-- 判断假如为空置房，则只能添加业主 -->
					<u-radio name="1002" :disabled="formData.state=='2000'?true:false">
						住户
					</u-radio>
					<u-radio name="1003" :disabled="formData.state=='2000'?true:false">
						租户
					</u-radio>
				</u-radio-group>
			</view>
			<view class="button-lg">
				<button @click="submit()">提交</button>
			</view>
		</view>

		<!-- 身份证类型列表 -->
		<u-picker v-model="typeShow" mode="selector" :default-selector="idCardTypeIndex" :range="idCardType"
			range-key="idCardName" @confirm="typeConfirm"></u-picker>

		<!-- 身份证拍照弹窗 -->
		<takeIdCard :takeIdCardShow="takeIdCardShow" @takeIdCardClose="takeIdCardClose"
			@takeIdCardNumber="takeIdCardNumber" :takeIdCardAddClass="takeIdCardAddClass"
			@takeIdCardRemoveClass="takeIdCardRemoveClass"></takeIdCard>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		saveOwner
	} from '@/api/owner.js'; // 添加住户接口
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tools/index.js'
	import {
		getImgSize
	} from '@/utils/ImageUtil.js'
	export default {
		data() {
			return {
				typeShow: false, //身份证识别
				idCardType: [{ //身份证类型
						idCardName: '大陆身份证',
						type: 'PRC'
					},
					{
						idCardName: '香港身份证',
						type: 'HK'
					},
					{
						idCardName: '澳门身份证',
						type: 'MO'
					},
					{
						idCardName: '台湾身份证',
						type: 'TWN'
					},
					{
						idCardName: '国外身份证',
						type: 'F'
					}
				],
				idCardTypeIndex: [0], //身份证类型下标
				idCardTypeName: '大陆身份证', //身份证类型名称
				formData: {
					roomId: '', //房间id 
					roomNum: '', //房间编号
					unitId: '', //单元id
					unitNum: '', //单元编号
					floorId: '', //楼栋id
					floorNum: '', //楼栋编号
					religion: '', //宗教 传递空值
					nation: '', //民族 传递空值
					state: '', //房屋状态
					roomType: '', //房屋类型
					name: '', // 住户姓名
					age: '', //年龄
					link: '', //联系方式
					sex: '', //性别，0为男，1为女
					ownerTypeCd: '', //业主类型，1001为业主，1002为住户，1003为租户
					remark: '', //备注，暂不传
					ownerPhoto: '', //头像图片 base64
					ownerId: '', //业主id,房屋如果没有业主则不需要传递
					idCardType: 'PRC', //身份证类型  默认大陆身份证
					idCard: '', //身份证id
					communityId: '', // 小区id
					userId: '', //操作人id
					storeId: '',
				},

				// 身份证拍照识别
				takeIdCardShow: false,
				takeIdCardAddClass: false,
			}
		},

		watch: {
			'formData.state': {
				handler(newName, oldName) {
					if (newName == '2000') {
						this.formData.ownerTypeCd = '1001'
					}
				},
				immediate: true,
				deep: true
			}
		},
		onLoad() {
			uni.$on('idNumber', (data) => {
				console.log(data)
			})
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				console.log('path', path)
				pathToBase64(path)
					.then(base64 => {
						this.formData.ownerPhoto = base64
						console.log('获取base64文件大小', getImgSize(base64))
						// dealImage(base64,100,(base64)=>{
						// 	console.log('获取压缩后的图片',base64)
						// })
						// if(getImgSize(base64) > 2048){

						// }
					})
					.catch(error => {
						console.error('获取失败', error)
					})
			})
		},
		methods: {
			/**
			 * 性别
			 */
			radioGender(e) {
				console.log('性别', e);
				this.formData.sex = e
			},
			/**
			 * 身份
			 */
			radioIdentity(e) {
				console.log('身份', e);
				// this.formData.ownerTypeCd = e
			},
			/**
			 * 提交
			 */
			submit() {
				if (!this.checkData()) { //校验
					return;
				}
				this.formData.communityId = this.userCommunity.communityId
				this.formData.userId = this.userInfo.userId
				this.formData.storeId = this.userInfo.storeId
				var that = this
				console.log('获取传参', this.formData)
				uni.showLoading({
					title: '加载中'
				})
				saveOwner(this.formData).then((res) => {
					console.log('添加住户', res)
					if (res.code == 0) {
						uni.hideLoading()
						uni.showToast({
							title: '添加成功',
							duration: 2000,
							icon: 'none'
						});
						that.emptyData() //清除还原参数
					}
				}).catch(function(reason) {

				})
			},
			/**
			 * 弹出层确认选择
			 */
			typeConfirm(e) {
				console.log('所选择的', e)
				this.idCardTypeIndex = [Number(e)]
				for (let i = 0; i <= this.idCardType.length; i++) {
					if (i == e) {
						this.formData.idCardType = this.idCardType[i].type
						this.idCardTypeName = this.idCardType[i].idCardName
					}
				}
			},
			/**
			 * 选择图片
			 */
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			/**
			 * 清空数据
			 */
			emptyData() {
				this.idCardTypeIndex = [0] //身份证类型下标
				this.idCardTypeName = '大陆身份证' //身份证类型名称
				this.formData = {
					roomId: '', //房间id 
					roomNum: '', //房间编号
					unitId: '', //单元id
					unitNum: '', //单元编号
					floorId: '', //楼栋id
					floorNum: '', //楼栋编号
					religion: '', //宗教 传递空值
					nation: '', //民族 传递空值
					state: '', //房屋状态
					roomType: '', //房屋类型
					name: '', // 住户姓名
					age: '', //年龄
					link: '', //联系方式
					sex: '', //性别，0为男，1为女
					ownerTypeCd: '', //业主类型，1001为业主，1002为住户，1003为租户
					remark: '', //备注，暂不传
					ownerPhoto: '', //头像图片 base64
					ownerId: '', //业主id,房屋如果没有业主则不需要传递
					idCardType: 'PRC', //身份证类型  默认大陆身份证
					idCard: '', //身份证id
					communityId: '', // 小区id
					userId: '', //操作人id
					storeId: '',
				}
			},
			/**
			 * 身份证拍照识别弹窗
			 */
			takeIdCardOpen() {
				this.takeIdCardShow = true;
				setTimeout(() => {
					this.takeIdCardAddClass = true;
				}, 50)
			},
			takeIdCardClose(val) {
				this.takeIdCardShow = val;
			},
			takeIdCardRemoveClass(val) {
				this.takeIdCardAddClass = val;
			},
			takeIdCardNumber(data) {
				console.log('身份证信息', data)
				this.formData.name = data.name
				this.formData.idCard = data.idNumber
				
				if(data.sex == '男'){
					this.formData.sex = '0'
				}else if(data.sex == '女'){
					this.formData.sex = '1'
				}
				
				this.getAge(data.idNumber)
			},
			/**
			 * 根据身份证获取年龄
			 */
			getAge(iden) {
				let val = iden.length;
				let myDate = new Date();
				let month = myDate.getMonth() + 1;
				let day = myDate.getDate();
				let age = 0;

				if (val === 18) {
					age = myDate.getFullYear() - iden.substring(6, 10) - 1;
					if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day)
						age++;
				}
				this.formData.age = age
			},
			/**
			 * 校验
			 */
			checkData() {
				return this.$checkFrom({
					formData: this.formData
				}, {
					'formData.roomId': [{
						limit: "required",
						param: "",
						errInfo: "请选择房屋"
					}],
					'formData.name': [{
						limit: "required",
						param: "",
						errInfo: "请输入住户姓名"
					}],
					'formData.sex': [{
						limit: "required",
						param: "",
						errInfo: "请选择性别"
					}],
					'formData.idCard': [{
						limit: "required",
						param: "",
						errInfo: "请输入身份证"
					}, {
						limit: "idCard",
						param: "",
						errInfo: "请输入正确的身份证",
						additional: this.formData.idCardType == 'PRC'
					}],
					'formData.link': [{
						limit: "required",
						param: "",
						errInfo: "请输入手机号码"
					}, {
						limit: "phone",
						param: "",
						errInfo: "请输入正确的手机号码"
					}],
					'formData.ownerTypeCd': [{
						limit: "required",
						param: "",
						errInfo: "请选择住户身份"
					}]
				});
			},
			/**
			 * 跳转选择房屋
			 */
			jumpRoom() {
				uni.navigateTo({
					url: '../selectHome/selectFloors/selectFloors?html=addResidents'
				})
			}
		}
	}
</script>

<style lang="scss">
	.nl-margin-right {
		min-width: 112rpx;
		text-align-last: justify;
		margin-right: 40rpx;
	}

	.input {
		flex: 1;
		font-size: $uni-font-size-base;
	}

	.owner-photo {
		overflow: hidden;

		.u-avatar-demo {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}
	}

	.take-idCard {
		width: 80rpx;
		height: 100rpx;
		padding: 20rpx 0 20rpx 20rpx;
	}
</style>
